<input hidden="hidden" id="navValue" value="部门列表">

<div class="page-content">
    <div class="page-header">
        <h1>
            部门管理
            <small>
                <i class="ace-icon fa fa-angle-double-right"></i>
                添加部门
            </small>

<!--            <label style="float: right"><form action="" method="get">-->
<!--                    <input type="search" name="keywords" style="height: 35px;" class="input-sm" placeholder="手机号码" aria-controls="dynamic-table" value="">-->
<!---->
<!--                    <button id="searchBtn" type="submit" class="dt-button buttons-collection buttons-colvis btn btn-white btn-primary btn-bold" tabindex="0" aria-controls="dynamic-table" data-original-title="" title="搜索"><span><i class="fa fa-search bigger-110 blue"></i></span></button></form></label>-->

        </h1>
    </div><!-- /.page-header -->

    <div class="row">
        <from class="form-horizontal user-data" role="form">
            <div class="form-group">
                <label class="col-sm-3 control-label no-padding-right" for="form-field-1"> 部门名称: </label>

                <div class="col-sm-5">
                     <input type="text" name="name" placeholder="部门名称" class="col-xs-8" value="">
                </div>
            </div>

            <div class="form-group">
                <label class="col-sm-3 control-label no-padding-right" for="form-field-1"> 部门等级: </label>

                <div class="col-sm-5">
                    <select class="col-sm-3 level-id">
                        {foreach $category as $key =>$val}
                            <option mark="{$val['needValue']}" value="{$val->id}">{$val->name}</option>
                        {/foreach}
                    </select>
                    <span class="col-sm-2" style="line-height: 30px;">人员要求:</span>
                    <span class="col-sm-6 level-msg" style="line-height: 30px;padding-left: 0px;"></span>
                </div>
            </div>

            <div class="form-group">
                <label class="col-sm-3 control-label no-padding-right" for="form-field-1"> 人员设置: </label>

                <div class="col-sm-5">
                    {foreach $levels as $val}
                        <button class="btn showBtn" mark="{$val['id']}">
                            <i class="ace-icon fa fa-pencil align-top bigger-125"></i>
                            {$val['name']}
                        </button>
                    {/foreach}
                </div>
            </div>



            <div class="form-group" style="height: 200px;">
                <label class="col-sm-3 control-label no-padding-right" for="form-field-1">  </label>

                <div class="col-sm-3 showUser">

                </div>
            </div>


            <div class="form-group">
                <label class="col-sm-3 control-label no-padding-right" for="form-field-1"> 是否启用: </label>

                <div class="col-sm-3">
                    <label style="padding-top: 5px;">
                        <input name="switch-field-1" class="ace ace-switch ace-switch-1 statusValue" checked type="checkbox">
                        <span class="lbl"></span>
                    </label>
                </div>
            </div>

            <div class="col-md-offset-3 col-md-9">
                <button class="btn btn-info addBtn" type="button">
                    <i class="ace-icon fa fa-check bigger-110"></i>
                    确认新增
                </button>

                <button class="btn" type="reset">
                    <i class="ace-icon fa fa-undo bigger-110"></i>
                    取消
                </button>
            </div>
        </from>

    </div><!-- /.row -->
</div>

<script>
    $(function () {
        levelMsg();
        $('.level-id').change(function () {
            levelMsg();
        });
        $('.showBtn').click(function () {
            var level = $(this).attr('mark');
            var url = '{:url("department/shareholders")}';
            layer.open({
                type:2,
                title:false,
                area:['1200px','600px'],
                content:url+"?level="+level
            });
        });

        $('.addBtn').click(function () {
            var name = $('input[name="name"]').val();
            var level = $(".level-id").val();
            if($(".statusValue").is(":checked")){
                var status = 1;
            }else{
                var status = 0;
            }
            var usermsg = new Array();
            $('.showUser').find('input[type="checkbox"]:checked').each(function () {
                usermsg.push($(this).val());
            });
            usermsg = JSON.stringify(usermsg);
            if(name == ""){
                layer.msg('请填写部门名称！',{icon:5});
                return
            }
            if(usermsg.length <1) {
                layer.msg('成立部门人员不足！',{icon:5});
                return
            }


            var data = {name:name,level:level,status:status,usermsg:usermsg};
            $.post(location.href,data,function (e) {
                if(e.code == 200){
                    layer.msg('添加部门成功',{icon:6});
                    self:setInterval(function () {
                        location.href = location.href;
                    },2000);
                }else{
                    layer.msg(e.message,{icon:5});
                }

            },'json');
        });
    });

    function levelMsg() {
        var mark = $('.level-id').find("option:selected").attr('mark');
        $(".level-msg").text(mark);
    }

    var show_id = new Array();
    var show_name = new Array();
    function ShowBox(data) {
        var i = 0;
        while(i<data[0].length){
            var flage = true;
            if(show_id.length > 0){
                $.each(show_id,function (key,val) {
                    if(val == data[0][i]) flage =false;
                });
                if(flage){
                    show_id.push(data[0][i]);
                    show_name.push(data[1][i]);
                }
            }else {
                show_id.push(data[0][i]);
                show_name.push(data[1][i]);
            }

            i++;
        }

        showUser();
        $('.layui-layer-close').trigger('click');
    }
    
    function showUser() {
        if(show_id.length > 0){
            var html = '';
            $.each(show_id,function (key,val) {
                html += '<span><input type="checkbox" checked value="'+val+'">'+show_name[key]+'</span> ';
            });
            $('.showUser').html(html);
        }
    }



</script>